<!DOCTYPE HTML>
<html>
<head>
<title>Mail</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- bootstrap -->
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' media="all" />
<!-- //bootstrap -->
<!-- Custom Theme files -->
<link href="css/style.css" rel='stylesheet' type='text/css' media="all" />
<script src="js/jquery-1.8.3.min.js"></script>

<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/userInfo.js"></script>
<link href="css/component.css" rel="stylesheet" type="text/css"  />

<style>
	.container{
		display: flex;
		flex-direction: row ;
		width: 80%;
	}
	.frendsList{
		width: 30%;
		background-color: gray;
		border: 1px solid;
		text-align: center;
	}
	.contact-form{
		width: 70%;
	}
	#talkBolck{
		overflow: auto;
		width: 100%;
		margin-bottom: 2%;
		display : flex ;
		flex-direction:column;
		align-content: flex-start;
	}
</style>
</head>
<body class="cbp-spmenu-push" style="background-image: url(images/home.jpg) ;">

<!--header-->
	<div class="header-section2">
			<div class="container">
				<div class="header-top">
					<div class="top-nav">
						<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s2">
							<h3>Menu</h3>
							<ul>
								<li><a href="index.html">主页</a></li>
									 <script>
									   $( "li.menu" ).click(function() {
										 $( "ul.cl-effect-1" ).slideToggle( 300, function() {
										 // Animation complete.
										  });
										 });
									</script>
								<li><a href="events.html">日常活动</a></li>
								<li><a href="gallery.html">匹配功能</a></li>
								<li><a href="mail.html">聊天室</a></li>
								<li><a href="mail.html">个人主页</a></li>
							</ul>
						</nav>
						<div class="main buttonset">	
								<!-- Class "cbp-spmenu-open" gets applied to menu and "cbp-spmenu-push-toleft" or "cbp-spmenu-push-toright" to the body -->
								<button id="showRightPush"><img src="images/menu.png" alt=""/></button>
								<!--<span class="menu"></span>-->
						</div>
						<!-- Classie - class helper functions by @desandro https://github.com/desandro/classie -->
						<script src="js/classie.js"></script>
						<script>
						var menuRight = document.getElementById( 'cbp-spmenu-s2' ),
						showRightPush = document.getElementById( 'showRightPush' ),
						body = document.body;

						showRightPush.onclick = function() {
							classie.toggle( this, 'active' );
							classie.toggle( body, 'cbp-spmenu-push-toleft' );
							classie.toggle( menuRight, 'cbp-spmenu-open' );
							disableOther( 'showRightPush' );
						};

						function disableOther( button ) {
							if( button !== 'showRightPush' ) {
								classie.toggle( showRightPush, 'disabled' );
							}
						}
					 </script>
					</div>
					<div class="header-logo">
						<a href="index.html"><img src="images/header.jpg" alt="" width="300" height="100"/></a>
					</div>
					
					<div class="clearfix"> </div>
				</div>
			</div>
	</div>
<!--/header-->
<!--/header-->
<!--start-contact-->
	<div class="contact-content">
		<div class="container talkPannel" style= "height: 1000px;" >
			<div class="frendsList">
				<div v-for="item in friends" style="font-size: 25px;">
					<div style="margin-top: 5px;">
						<img src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" style="object-fit: cover; width: 70px; height :70px;" >
						<a v-on:click="talkwithU(item.friendId, item.friendUserName)" style="color: white;margin-left: 5px;" v-bind:id="item.friendId">{{item.friendUserName}}</a>
					</div>
				</div>
			</div>
			
			<div class="contact-form">
						<div id="talkBolck" v-html="content"></div>
						<input type="text" v-model="inputData" required="" style="margin-left: 2%;font-size: 25px; width:75%"> 
						<input type="submit" value="SEND" style="width:20%;font-size: 25px;" v-on:click="send(1)">
			</div>
		</div>
		
		<div class="copy-right-section">
				<div class="container">
					<div class="col-md-6 copy-right" style="text-align: center;">
						<p>一起来交友~~<a target="_blank" href="adminWeb/login.html">@Admin</a></p>
					</div>
				</div>
		</div>
	</div>	
	
</body>
<script>
	let talkOne = 0;
	let cnt = 0 ;
	myName = window.sessionStorage.getItem("name") ;

	config ={
		"el" : ".talkPannel" ,
		"data" : {
			"friends" : [],
			"content" : "",
			"inputData" : "开始聊天吧~",
			"getData" : "" ,
			"Name" : "",
			"Id" : "",
			"receiveTime" : ""
		},
		"methods" : {
			"talkwithU" : function (id , name){
				var e = document.getElementById("talkBolck") ;
				this.content = "" ;
				if(talkOne) {
					var e = document.getElementById(talkOne) ;
					e.style.color = "white" ;
				}
				
				talkOne = id ;
				var e = document.getElementById(id) ;
				e.style.color = "green" ;
				TalkName = name ;
				console.log(talkOne);
			},
			
			"send" :function(type){
					let html ;
					// 当前用户消息
					if (type == 0) { 
					  html = "<div class=\"el-row\" style=\"padding: 5px 0; display: flex;flex-direction: row ; margin-top:5px\">\n" +
					      "  <div class=\"el-col el-col-2\">\n" +
					      "  <span class=\"el-avatar el-avatar--circle\" style=\"height: 40px; width: 40px; line-height: 40px;\">\n" +
					      "    <img src=\"https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png\" style=\"object-fit: cover;width: 70px;height :70px>\"\n" +
					      "  </span>\n" +
					      "  </div>\n" +
						  "  <div class=\"el-col el-col-22\" style=\"text-align: right; padding-right: 10px\">\n" +
						  "    <div class=\"tip left\" style=\"font-size : 20px; text-align : left ;\">" + TalkName+" : "+this.getData+ "</div>\n" +
						  "  <div style=\"font-size=10; color:green;\">"+ this.receiveTime +"</div>\n"+
						  "  </div>\n" +
					      "</div>";
						  console.log(html)
						  this.content += html;
					} else {    
						
						console.log(url + "/message/insertMessage?fromUser="+ this.id +"&msg="+ this.inputData +"&toUser=" + talkOne) ;
						axios.get(url + "/message/insertMessage?fromUser="+ this.Id +"&msg="+ this.inputData +"&toUser=" + talkOne)
						.then(function(response){
							var f = response.data.state ;
							if(f == "0") {
								html = "<div class=\"el-row\" style=\"padding: 5px 0; display: flex;flex-direction: row ; justify-content:right; margin-top:5px\">\n" +
								    
														  "  <div class=\"el-col el-col-22\" style=\"text-align: right; padding-right: 10px\">\n" +
														  "  <div class=\"tip left\" style=\"font-size : 20px; text-align : left ;\">" + this.vue.Name + " : "+this.vue.inputData +"</div>\n" +

														  "  </div>\n" +
														  "  <div class=\"el-col el-col-2\">\n" +
														  "  <span class=\"el-avatar el-avatar--circle\" style=\"height: 40px; width: 40px; line-height: 40px;\">\n" +
														  "    <img src=\"https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png\" style=\"object-fit: cover;width: 70px;height :70px>\"\n" +
														  "  </span>\n" +
														  "  </div>\n" +
								    "</div>";
								console.log(html)
								this.vue.content += html;
							}else{
								window.alert("发送消息失败！") ;
							}
						})
						.catch() ;
					}
					
				},
				"check" : function(){
					if(talkOne) {
						console.log(url + "/message/selectNotRead?fromUser="+ talkOne +"&toUser=" + this.Id) ;
						axios.get(url + "/message/selectNotRead?fromUser="+ talkOne +"&toUser=" + this.Id)
						.then(function(response){
							console.log(response) ;
							var msgs = response.data.data ;
							console.log(msgs) ;
							
							for(var i = 0; i < msgs.length ; i ++){
								this.vue.getData = msgs[i].msg ;
								this.vue.receiveTime = msgs[i].sendTime ;
								console.log(this.vue.getData) ;
								this.vue.send(0);
							}
						})
						.catch() ;
					
					}
				}
		},
			
			"mounted" : function(){
				this.Name = window.sessionStorage.getItem("name") ;
				this.Id = window.sessionStorage.getItem("id") ;
				
				console.log(url + "/friend/SelectById?id=" + this.Id) ;
				
				axios.get(url + "/friend/SelectById?id=" + this.Id)
				.then(function(response){
						console.log(response.data.data) ;
						this.vue.friends = response.data.data ;
						console.log(this.vue.friends) ;
					}) 
				.catch();
					
				console.log(this.friends) ;
				this.$nextTick(() => {
				      setInterval( this.check, 1000)
				    });
			}
	}
	
	
	var vue = new Vue(config) ;
</script>
<script>
	window.onload = function () {
		myId = window.sessionStorage.getItem("id") ;
		if(myId == null) {
			alert('还没登录哦！');
			window.location.href = "index.html";
		}
	}
	window.onunload = function(){
	
	}
</script>
</html>